<template>
  <hr />
  <h2>查看（待审批）</h2>
  <hr />
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="部门：" prop="departmentName">
      <el-select
        style="width: 180px"
        v-model="ruleForm.departmentName"
        placeholder="全部"
        clearable
        @change="bumen"
      >
        <el-option
          v-for="item in Department"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="职位" prop="postsName" style="width: 280px">
      <el-select v-model="ruleForm.postsName" placeholder="请选择职位" @change="zhiwei">
        <el-option
          v-for="item in Position"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="员工姓名" prop="employeeName" style="width: 400px">
      <el-select v-model="ruleForm.employeeName" placeholder="请选择姓名">
        <el-option
          v-for="item in tableEmployee"
          :label="item.employeeName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上级负责人" prop="superstratumCharge" style="width: 280px">
      <el-select v-model="ruleForm.superstratumCharge" placeholder="请选择上级负责人">
        <el-option label="李明" value="李明" />
        <el-option label="张三" value="张三" />
        <el-option label="王五" value="王五" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期:" prop="dateonBoard">
      <el-date-picker
        v-model="ruleForm.dateonBoard"
        type="date"
        placeholder="请选择入职日期"
        clearable
      />
    </el-form-item>
    <el-form-item label="备注:">
      <el-input
        v-model="ruleForm.remarks"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="请输入备注信息"
      />
    </el-form-item>
    <el-form-item label="审批备注">
      <el-input
        v-model="form.remarks"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="请输入备注信息"
      />
    </el-form-item>
    <el-form-item label="转批人">
      <el-select v-model="form.superstratumCharge" placeholder="请选择转批人">
        <el-option v-for="item in tableUser" :label="item.name" :value="item.name" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="Pass((xid = 1))">通过并转批</el-button>
      <el-button @click="Pass((xid = 2))">拒绝</el-button>
      <el-button @click="Pass((xid = 3))">通过并终止转批</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    entryId: route.query.id,
    departmentName: "",
    postsName: "",
    employeeName: "",
    superstratumCharge: "",
    dateonBoard: "",
    remarks: "",
    approvalEntry: '',
    createName: "",
    createDate: "",
    updateName: null,
    updateDate: null,
})
let xid = 0;
const form = reactive({
    "nameId": route.query.name,
    "remarks": "",
    "personnelId": route.query.id,
    "field": xid,
    tableName:"入职"
})
onMounted(() => {
    GetemployeeName();
    GetModelEntry();
    GetUser();
})
const Department = ref([
    { label: 'CEO', value: 1 },
    { label: '财务部', value: 2 },
    { label: '运营部', value: 3 },
    { label: '人事部', value: 4 },
    { label: '策划部', value: 5 },
])

const Positions = ref([
    { label: '董事长', value: 1 },
    { label: '财务部长', value: 2 },
    { label: '运营部长', value: 3 },
    { label: '人事部长', value: 4 },
    { label: '策划部长', value: 5 },
])
const tableUser = ref([]);
const GetUser = () => {
    axios({
        method: "get",
        url: "http://47.96.109.219:5202/api/User/UserSelectShow"
    })
        .then(res => {
            tableUser.value = res.data.data
        })
}
const Position:any = ref([]);
const bumen = (id: number) => {
    Position.value = Positions.value.filter(positions => positions.value == id);
    const selectedPosition = Department.value.find(position => position.value === id);
    if (selectedPosition) {
        ruleForm.departmentName = selectedPosition.label;
    }
}
const zhiwei = (id: number) => {
    const selectedPosition = Positions.value.find(position => position.value === id);
    if (selectedPosition) {
        ruleForm.postsName = selectedPosition.label;
    }
    GetemployeeName();
}
const rules = reactive<FormRules>({
    employeeName: [
        {
            required: true,
            message: '请选择员工姓名',
            trigger: 'change',
        },
    ],
    departmentName: [
        {
            required: true,
            message: '请选择部门',
            trigger: 'change',
        },
    ],
    postsName: [
        {
            required: true,
            message: '请选择职位',
            trigger: 'change',
        },
    ],
    superstratumCharge: [
        {
            required: true,
            message: '请选择上级负责人',
            trigger: 'change',
        },
    ],
    dateonBoard: [
        { required: true, message: '入职日期为必填项', trigger: 'blur' },
    ],
})
const tableEmployee = ref([]);
///员工姓名
const GetemployeeName = () => {
    axios({
        method: "get",
        url: "empread/api/Employee/EmployeeEntryById",
        params: {
            postsId: ruleForm.postsName
        }
    })
        .then(res => {
            tableEmployee.value = res.data.data
        })
}
const GetModelEntry = () => {
    axios({
        method: "get",
        url: "empread/api/Entry/GetModelEntry",
        params: {
            id: ruleForm.entryId
        }
    })
        .then(res => {
            ruleForm.departmentName = res.data.data.departmentName
            ruleForm.postsName = res.data.data.postsName
            GetemployeeName();
            ruleForm.employeeName = res.data.data.employeeName
            ruleForm.superstratumCharge = res.data.data.superstratumCharge
            ruleForm.dateonBoard = res.data.data.dateonBoard
            ruleForm.remarks = res.data.data.remarks
            ruleForm.approvalEntry = res.data.data.approvalEntry
            ruleForm.createName = res.data.data.createName
            ruleForm.createDate = res.data.data.createDate
        })
}
//
//
//

const Pass = (id: number) => {
    console.log()
    axios.post("empwrite/api/LoginUpdate/LoginUpdateEntity", {
        nameId: ruleForm.employeeName,
        remarks: form.remarks,
        personnelId: route.query.id,
        field: id,
        tableName:form.tableName
    })
        .then(res => {
            if (res.data.data > 0) {
                router.push({
                    name: "EntryShow"
                })
            }
            else {

            }
        })
}
</script>
